<template>
    <template v-for="item in props.menuData" :key="item.menuCode">
      <el-sub-menu :index="item.url" v-if="item.childList">

        <template #title v-if="item.icon !==''">
          <!-- <em :class="item.icon"></em> -->
          <span class="tbdfont icon" :class="item.icon"></span>
          <span v-text="item.menuName" v-if="item.url !== 'hideConfiguration'"></span>
        </template>
        <template #title v-else><span>{{item.menuName}}</span></template>

        <subItem :menuData="item.childList"></subItem>
      </el-sub-menu>

      <el-menu-item :index="item.url" v-if="!item.childList && item.icon ===''" :disabled="item.url === ''">{{ item.menuName }}</el-menu-item>
      <el-menu-item :index="item.url" v-if="!item.childList && item.icon !==''" :disabled="item.url === ''">
        <!-- <em :class="item.icon" v-if="item.icon !==''"></em> -->
        <span class="tbdfont icon" :class="item.icon"></span>
        <template #title>{{ item.menuName }}</template>
      </el-menu-item>
    </template>
</template>


<script setup>
import subItem from './subMenu.vue'

const props = defineProps({
  menuData: {
    type: Array,
    default: [],
  }
})
</script>

<style scoped lang="scss">
  .icon{
    margin-right: pxTvw(12);
  }
</style>
